<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
	</head>

	<body>
		<!--<form class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label">输入框</label>
				<div class="layui-input-block">
					<input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>-->
		<div style="margin: 15px;">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<!--<legend>响应式的表单集合</legend>-->
			</fieldset>
			<style type="text/css">
				.db-list{ text-align: center;  }
				.db-list li{
					display: inline-block;
					width: 120px;
					padding: 10px;
					border: 1px solid #ccc;
					margin: 10px;
					cursor: pointer;
				}
				.db-list li img{
					width: 100%;
				}
				.db-list li span{
					margin-top: 10px;
					padding-top: 10px;
					border-top:1px solid #ccc;
					display: block;
					height: 20px;
					line-height: 20px;
					text-align: center;
				}

			</style>

			<!--<ul class="db-list">-->
				<!--<li>-->
					<!--<img src="../images/db-mysql.png"><span>MySql</span>-->
				<!--</li>-->
				<!--<li>-->
					<!--<img src="../images/db-sql.png"><span>SQL-Server</span>-->
				<!--</li>-->
				<!--<li>-->
					<!--<img src="../images/db-oracle.png"><span>Oracle</span>-->
				<!--</li>-->
			<!--</ul>-->
			<div id="vis-node" class="db-list" style="height:900px"></div>
		
			<form class="layui-form" action="" style="display: none;">
				<div class="layui-form-item">
					<label class="layui-form-label">数据库名称</label>
					<div class="layui-input-block">
						<input type="text" name="modelName" lay-verify="required" autocomplete="off" placeholder="请输入数据库名称" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">简要描述</label>
					<div class="layui-input-block">
						<textarea placeholder="请输入简要描述" name="modelDesc" class="layui-textarea"></textarea>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">IP</label>
					<div class="layui-input-block">
						<input type="text" name="ip" lay-verify="ip" autocomplete="off" placeholder="请输入数据库IP地址" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">SID</label>
					<div class="layui-input-block">
						<input type="text" name="sid" lay-verify="required" autocomplete="off" placeholder="请输入数据库SID" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-block">
						<input type="text" name="user" lay-verify="required" autocomplete="off" placeholder="请输入数据库用户名" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-inline">
						<input type="password" name="password" lay-verify="required" autocomplete="off" placeholder="请输入数据库密码" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">是否启用</label>
					<div class="layui-input-block">
						<input type="checkbox" checked="checked" name="status" lay-skin="switch" title="是否启用" value="1">
					</div>
				</div>
				
				<!--被父级提交-->
				<div class="layui-form-item" style="display: none;">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit="" lay-filter="demo1" id="parentControlDom">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		<script type="text/javascript" src="../plugins/layui/layui.js"></script>
		<script type="text/javascript" src="../js/vis.js"></script>
		<script>
		
			layui.use(['jquery', 'form', 'layedit', 'laydate'], function() {
				var $ = layui.jquery,
					form = layui.form(),
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate;
		
				//创建一个编辑器
				//var editIndex = layedit.build('LAY_demo_editor');
				//自定义验证规则
				form.verify({
					ip:[/((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))/, 'IP地址格式不符']
				});
				//监听提交
				form.on('submit(demo1)', function(data) {
					$.post(baseUrl+'/db_add', data.field, function(back){
						//console.log(back);
						if(back.success){
							$('button[type=reset]').trigger('click');
							layer.msg('保存成功');
							parent.window.reloadDbList();
						}else{
							layer.alert(back.error, {title:'警告'});
						}
					});
					return false;
				});
//				$(".db-list li").click(function(){
//					$(".db-list").hide();
//					$(".layui-form").show()
//				})
			});

			var container = document.getElementById('vis-node');
            var options = {
                physics: {
                    forceAtlas2Based: {
                        gravitationalConstant: -26,
                        centralGravity: 0.005,
                        springLength: 230,
                        springConstant: 0.18
                    },
                    maxVelocity: 146,
                    solver: 'forceAtlas2Based',
                    timestep: 0.35,
                    stabilization: {iterations: 150}
                }
            };
            var node1 = {id:1,image:'../images/db-mysql.png',shape:'image',size:50};
            var node2 = {id:2,image:'../images/db-sql.png',shape:'image',size:50};
            var node3 = {id:3,image:'../images/db-oracle.png',shape:'image',size:50};
            var node4 = {id:4,label:'大数据'};

            var edge1 = {from:1, to:4, dashes:false, arrows:'to'};
            var edge2 = {from:2, to:4, dashes:false, arrows:'to'};
            var edge3 = {from:3, to:4, dashes:false, arrows:'to'};

            var network = new vis.Network(container, {nodes:[node1,node2,node3,node4],edges:[edge1,edge2,edge3]}, options);

            network.on("click",function (params) {
                if(params.nodes.length  == 1) {
                    //console.log(params.nodes);
                    var $ = layui.jquery;
                    $(".db-list").hide();
                    $(".layui-form").show();
                }
            })
		</script>
	</body>
</html>